main {
	background-color: $contentColor;
	padding: 20px 20px;
	color: $bodyColor;
	display: inline-block;

	hgroup {
		text-align: left;
		padding: 0 10px;
	}

	h2 {
		font-size: $baseFontSize*3;
		margin-bottom: 20px;
		font-weight: bold;
	}

	h4 {
		font-size: $baseFontSize*1.2;
		margin-bottom: 20px;
		line-height: 1.8em;
		max-width: 700px;
	}
}

.resultsPlaceholder {
	border: 2px dashed $mainColor;
	padding: 20px;
	background-color: #fff;
	width:100%;
	@include border-radius(4px);
	@include border-box;
	text-align: left;

	h3 {
		font-size: 2em;
		font-weight: 300;
		color: darken($bgColorAlt, 70);
		margin-bottom: 20px;
	}

	p {
		font-size: 1.5em;
		color: darken($bgColorAlt, 30);

	}
}
.callToActionArrow {
	text-align: left;
	width: 100%;
	height: 100px;
	width: 100px;
	margin-top: -15px;
	background: url("../img/hand-drawn-arrow-green-down.svg") no-repeat;
	-webkit-background-size: 100%;
	background-size: 100%;
	z-index: 50;
}

.spacesResultBox {
	margin-top: 40px;
	max-width: 1200px;
	overflow: hidden;
	ul {
		margin: 0;
		padding: 0;
	}
	
	h2 {
		font-size: 2em;
		font-weight: bold;
		display: block;
		width: 100%;
		text-align: left;
		margin-left: 10px;
	}
}

.spaceBox {
	width: 100%;
	float: left;
	@include border-box;
	display: inline-block;
	padding: 10px;
	

	
	
	img {
		width: 100%;
		height: auto;
	}

	a {	
		width: 100%;
		display: inline-block;
		background-color: #fff;
		border: $border;
		text-decoration: none;
		padding-bottom: 20px;
		overflow: hidden;
		text-align: left;
		position: relative;
		@include border-radius(4px);
		@include border-box;
		@include boxShadow;

		&:hover {
			border-color: $mainColor;

			.itemHoverEffect {
				opacity: 1;
			}
		}
	}

	h3 {
		font-size: $baseFontSize*1.5;
		margin: 15px 0;
		color: $mainColor;
		font-weight: bold;
		padding: 0 20px;
	}
	p {
		font-size: 1.5em;
		color: $bodyColor;
		padding: 0 20px;
		line-height: 25px;
		max-width: 700px;
	}
}

.itemHoverEffect {
	@include transition(0.3s);
	position: absolute;
	background-color: rgba($mainColor, 0.6);
	opacity: 0;
	top:0;
	left:0;
	right:0;

	.ratio {
		padding-top: 100%;
	}
	
	i {
		position: absolute;
		color: #fff;
		left: 50%;
		top: 50%;
		margin-top: -20px;
		margin-left: -20px;
	}
}

.mapa-areas{
	display: none;
	width: 100%;
	margin-top: 10px;
	background-color: #fff;
	border: $border;
	text-decoration: none;
	padding: 20px;
	overflow: hidden;
	text-align: center;
	position: relative;
	@include border-radius(4px);
	@include border-box;
	@include boxShadow;
	
	h3 {
		font-size: 1.8em;
		color: darken($bgColorAlt, 30);
		margin: 15px 0 30px;
		font-weight: normal;
		padding: 0 20px;
	}
}
// MEDIA QUERIES
@include min-screen($xs) {
	.spaceBox {
		width: 48%;
	}
}

@include min-screen($medium) {
	main {
		text-align: center;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 60px;
	
		h2 {
			font-size: $baseFontSize*4;
		}

	}
	.callToActionArrow {
		position: absolute;
		left: 310px;
		height: 100px;
		width: 100px;
		background: url("../img/hand-drawn-arrow-green.svg") no-repeat;
		-webkit-background-size: 100%;
		background-size: 100%;
	}
	.resultsPlaceholder {
		border: 2px dashed $mainColor;
		padding: 50px;
		margin-top: 30px;
	}
	.mapa-areas{
		display: block;
	}
}


@include min-screen($large) {
	.spaceBox {
		width: 33%;
	}
}

@include min-screen($xl) {
	.spaceBox {
		width: 25%;
	}
}

@include min-screen($xxl) {
	.spaceBox {
		width: 20%;
	}
}